<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="150px">
      <div class="updateinfo">
        <el-form-item label="头像" prop="imgUrl">
          <!-- <el-upload
          ref = "uploadRef"
          class="avater-uploader"
          :show-file-list="false"
          :auto-upload = "true"
          list-type="picture"
          :on-success="handleAvatarSuccess"
          action="baseURL + '/doctor/profilephoto_upload"
          name = "file"
          :before-upload="beforeAvatarUpload">
        </el-upload> -->
          <img v-if="baseURL+form.photo" :src="baseURL+form.photo" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
          <el-button type="primary" icon="el-icon-upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">
            上传头像
          </el-button>
          <image-cropper
            v-show="imagecropperShow"
            :key="imagecropperKey"
            :width="300"
            :height="300"
            url="doctor/profilephoto_upload"
            :params="{doctor_id: form.id}"
            lang-type="zh"
            @close="close"
            @crop-upload-success="cropSuccess"
          />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="id" prop="id">
          <el-input v-model="form.id" disabled />
        </el-form-item>
        <!-- <el-form-item label="旧密码" prop="userPassword">
          <el-input show-password v-model="form.userPassword" placeholder="请输入旧密码" type="password"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="userNewPassword">
          <el-input show-password v-model="form.userNewPassword" placeholder="请输入新密码" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="userConfirmPassword">
          <el-input show-password v-model="form.userConfirmPassword" placeholder="请再次输入新密码"
            type="password"></el-input>
        </el-form-item> -->
        <el-form-item label="年龄" prop="age">
          <el-input v-model="form.age" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <!-- <el-input v-model="form.gender" /> -->
          <select v-model="form.gender">
            <option value="男">男</option>
            <option value="女">女</option>
          </select>
        </el-form-item>
        <el-form-item label="级别" prop="postLevel">
          <!-- <el-input v-model="form.postLevel" /> -->
          <select v-model="form.postLevel">
            <option value="住院医师">住院医师</option>
            <option value="主治医师">主治医师</option>
            <option value="副主任医师">副主任医师</option>
            <option value="主任医师">主任医师</option>
            <option value="教授">教授</option>
            <option value="住院医师">副教授</option>
          </select>
        </el-form-item>
        <el-form-item label="学历" prop="education">
          <el-input v-model="form.education" />
        </el-form-item>
        <el-form-item label="大学" prop="university">
          <el-input v-model="form.university" />
        </el-form-item>
        <!-- <el-form-item label="科室ID" prop="subjectID">
          <el-input v-model="form.subjectID" />
        </el-form-item> -->
        <!-- <el-form-item label="科室" prop="subjectName">
          <el-input v-model="form.subjectName" />
        </el-form-item> -->
        <!-- <el-form-item label="工作时间" prop="workDate">
          <el-input v-model="form.workDate" />
        </el-form-item> -->
        <el-form-item label="关于我" prop="aboutMe">
          <el-input v-model="form.aboutMe" />
        </el-form-item>
        <el-form-item label="" prop="提交">
          <el-button type="primary" @click="submit">提交</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
// import axios from 'axios'
import { updateDoctorInfo } from '@/api/user'
import ImageCropper from '@/components/ImageCropper'

export default {
  components: { ImageCropper },
  data() {
    // const equalToPassword = (rule, value, callback) => {
    //   if (value === '') {
    //     callback(new Error('请再次输入密码'))
    //   } else if (value !== this.form.userNewPassword) {
    //     callback(new Error('两次输入密码不一致!'))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      imgUrl: '',
      imagecropperShow: false,
      imagecropperKey: 0,
      baseURL: 'https://101.70.156.105:28847',
      test: {
        password: 'hashfskdjfdhfkd'
      },
      selectedFile: null,
      defaultUserImg: 'https://img.ixintu.com/download/jpg/20200901/3e9ce3813b7199ea9588eeb920f41208_512_512.jpg!ys',
      form: {
        name: '',
        age: null,
        // phone: '',
        gender: '',
        id: null,
        postLevel: '',
        photo: null,
        aboutMe: '',
        // subjectID: '',
        // subjectName: '',
        education: '',
        // workDate: '',
        // createTime: '',
        university: ''
      },
      rules: {
      //   name: [
      //     { required: true, message: '昵称不能为空', trigger: 'blur' }
      //   ],
      //   userPassword: [
      //     { required: true, message: '旧密码不能为空', trigger: 'blur' }
      //   ],
      //   userNewPassword: [
      //     { required: true, message: '请输入新密码', transform: value => value, trigger: 'blur' },
      //     {
      //       type: 'string',
      //       message: '请输入不包含空格的字符',
      //       trigger: 'blur',
      //       transform (value) {
      //         if (value && value.indexOf(' ') === -1) {
      //           return value
      //         } else {
      //           return false
      //         }
      //       }
      //     },
      //     {
      //       trigger: 'blur',
      //       validator: (rule, value, callback) => {
      //         // var passwordreg = /(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{10,20}/
      //         // var passwordreg = /(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{10,20}/
      //         const passwordreg = /^(?=.*[a-zA-Z])(?=.*\d).{7,20}$/
      //         if (!passwordreg.test(value)) {
      //           // callback(new Error('密码必须由数字、字母、特殊字符组合,请输入10-20位'))
      //           callback(new Error('密码由数字、字母组合且7-20位'))
      //         } else {
      //           callback()
      //         }
      //       }
      //     }
      //   ],
      //   userConfirmPassword: [
      //     { required: true, validator: equalToPassword, trigger: 'blur' }
      //   ]
      }
    }
  },

  mounted() {
    this.load()
  },

  methods: {
    cropSuccess(resData) {
      this.imagecropperShow = false
      this.imagecropperKey = this.imagecropperKey + 1
      if (resData.message === '图片上传成功') {
        this.$message.success('图片上传成功')
        this.form.photo = resData.photo
        console.log(this.form.photo)
        // this.dialogVisible = false
        // this.load()
      } else {
        console.log('error submit!!')
        this.$message.error('图片上传失败')
      }
    },
    close() {
      this.imagecropperShow = false
    },
    // handleAvatarSuccess(res) {
    //   this.imgUrl = res.data
    //   console.log(res.data.url)
    //   console.log(res.data)
    // },

    uploadAvatar() {
      // console.log('上传头像:', this.selectedFile);
      console.log('上传头像:', this.form.photo)
      // 这里可以发送请求到后端，处理上传逻辑
    },
    load() {
      // 读取存储的 JSON 字符串并反序列化为对象
      const presentUser = JSON.parse(localStorage.getItem('presentUser'))
      const dImg = JSON.parse(localStorage.getItem('dImg'))
      this.form.id = presentUser.doctor_id || ''
      this.form.age = presentUser.age || ''
      this.form.gender = presentUser.gender || ''
      this.form.photo = dImg || ''
      this.form.name = presentUser.doctor_name || ''
      this.form.postLevel = presentUser.post_level || ''
      this.form.aboutMe = presentUser.about_me || ''
      this.form.education = presentUser.education || ''
      // this.form.workDate = presentUser.work_date || ''
      // this.form.subjectID = presentUser.subject_id || ''
      // this.form.subjectName = presentUser.subject_name || ''
      this.form.university = presentUser.university || ''
      console.log(this.form.photo)
    },
    async submit() {
      this.$refs.form.validate(async(valid) => {
        if (valid) {
          console.log(this.form)
          const temp = {
            doctor_id: this.form.id,
            doctor_name: this.form.name,
            age: this.form.age,
            gender: this.form.gender,
            post_level: this.form.postLevel,
            about_me: this.form.aboutMe,
            education: this.form.education,
            // work_date: this.form.workDate,
            // subject_id: this.form.subjectID,
            // subject_name: this.form.subjectName,
            university: this.form.university
          }

          const res = await updateDoctorInfo(temp)
          if (res.message === '更新成功') {
            this.$message.success('保存成功')
            // this.dialogVisible = false
            localStorage.setItem('presentUser', JSON.stringify(temp))
            localStorage.setItem('dImg', JSON.stringify(this.form.photo))
            this.load()
          }
        } else {
          console.log('error submit!!')
          this.$message.error('保存失败')
        }
      })
    }
    // handleImgSuccess (response, file, fileList) {
    //   console.log('Image uploaded successfully:', response)
    //   this.form.photo = response.data
    // }
  }
}
</script>

<style>
.updateinfo {
  /* height: 400px; */
  overflow: auto;
  font-weight: 800;
}

.avatar{
  height: 120px;
  width: 150px;
}

.left {
  /* width: 330px; */
  float: left;
}

.right {
  overflow: hidden;
}
</style>
